<template>
  <div class="warper">
  <el-menu @open="handleOpen" @close="handleClose" :router="router">
    <el-submenu index="1">
      <template slot="title"><i class="el-icon-message"></i>导航一</template>
        <el-menu-item index="foo">foo</el-menu-item>
        <el-menu-item index="1-2">选项2</el-menu-item>
    </el-submenu>
    <el-menu-item index="bar"><i class="el-icon-menu"></i>bar</el-menu-item>
    <el-menu-item index="3"><i class="el-icon-setting"></i>导航三</el-menu-item>
    <el-submenu index="4">
      <template slot="title"><i class="el-icon-message"></i>导航一</template>
      <el-menu-item index="4-1">选项1</el-menu-item>
      <el-menu-item index="4-2">选项2</el-menu-item>
    </el-submenu>
    <el-submenu index="5">
      <template slot="title"><i class="el-icon-message"></i>导航一</template>
      <el-menu-item index="4-1">选项1</el-menu-item>
      <el-menu-item index="4-2">选项2</el-menu-item>
    </el-submenu>
    <el-submenu index="6">
      <template slot="title"><i class="el-icon-message"></i>导航一</template>
      <el-menu-item index="4-1">选项1</el-menu-item>
      <el-menu-item index="4-2">选项2</el-menu-item>
    </el-submenu>
    <el-submenu index="7">
      <template slot="title"><i class="el-icon-message"></i>导航一</template>
      <el-menu-item index="4-1">选项1</el-menu-item>
      <el-menu-item index="4-2">选项2</el-menu-item>
    </el-submenu>
    <el-submenu index="7">
      <template slot="title"><i class="el-icon-message"></i>导航一</template>
      <el-menu-item index="4-1">选项1</el-menu-item>
      <el-menu-item index="4-2">选项2</el-menu-item>
    </el-submenu>
    <el-submenu index="7">
      <template slot="title"><i class="el-icon-message"></i>导航一</template>
      <el-menu-item index="4-1">选项1</el-menu-item>
      <el-menu-item index="4-2">选项2</el-menu-item>
    </el-submenu>
    <el-submenu index="7">
      <template slot="title"><i class="el-icon-message"></i>导航一</template>
      <el-menu-item index="4-1">选项1</el-menu-item>
      <el-menu-item index="4-2">选项2</el-menu-item>
    </el-submenu>
    <el-submenu index="7">
      <template slot="title"><i class="el-icon-message"></i>导航一</template>
      <el-menu-item index="4-1">选项1</el-menu-item>
      <el-menu-item index="4-2">选项2</el-menu-item>
    </el-submenu>
  </el-menu>
  </div>
</template>
<script>
  export default {
      data(){
          return{
              router:true
          }
      },
    methods: {
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      }
    }
  }
</script>
<style scoped>
  .warper{width:260px;height:100%;overflow-y:auto;overflow-x:hidden;}
  .el-menu{border-radius:0;background-color: #ffffff;}
  .el-submenu .el-menu-item{background-color: #eff2f7;}
  li{width: 240px;}
</style>
